import React, { useEffect, forwardRef, useState, useImperativeHandle } from "react";
import { Upload, message } from "antd";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons";
import type { GetProp, UploadProps } from "antd";
import dataFilter from "echarts/types/src/processor/dataFilter.js";



// 图片上传
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
const getBase64 = (img: FileType, callback: (url: string) => void) => {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result as string));
  reader.readAsDataURL(img);
};
const beforeUpload = (file: FileType) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("You can only upload JPG/PNG file!");
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error("Image must smaller than 2MB!");
  }
  return isJpgOrPng && isLt2M;
};
interface UploadURLProps {
  imgSrc?: string;
  setForm?: any;
  form?:any
}
const UploadURL = forwardRef((props: UploadURLProps,ref) => {
  let baseURL = 'http://127.0.0.1:13458/'
  const [loading, setLoading] = useState(false);
  let [imageUrl, setImageUrl] = useState<string>();
  const [url, setUrl] = useState<string>();
  useEffect(() => {
    props.imgSrc && setImageUrl(baseURL + props.imgSrc)

  }, [props.imgSrc])
  const handleChange: UploadProps["onChange"] = (info) => {

    console.log()
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      getBase64(info.file.originFileObj as FileType, (url) => {
        setLoading(false);
        setImageUrl(url);
        setUrl(info.file.response.path)
        props.setForm({
          ...props.form,
          uploadUrl: info.file.response.path
        })

      });
    }
  };

  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );


  useImperativeHandle(ref, () => ({
    getImageUrl: url,
  }))

  return (
    <div>
    
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="http://127.0.0.1:13458/users/upload"
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {imageUrl ? (
          
          <img src={imageUrl} alt="avatar" style={{ width: "100%" }} />
        ) : (
          uploadButton
        )}
      </Upload>
    </div>
  );
})

export default UploadURL;
